<template>
  <div class="security-baseline-container">
    <!-- 头部统计卡片 -->
    <el-card class="header-card" shadow="hover">
      <div class="header-content">
<!--        <div class="header-left">-->
<!--          <div class="title-section">-->
<!--            <h2 class="main-title">安全基线检查</h2>-->
<!--            <el-tag type="success" effect="plain" class="service-tag">企业版</el-tag>-->
<!--          </div>-->
<!--          <p class="description">提供主机、数据库、应用的安全基线检查，支持云安全基线和等保合规检测，确保系统安全稳定运行。</p>-->
<!--        </div>-->
        <div class="header-stats">
          <div class="stat-group">
            <div class="stat-item">
              <div class="stat-icon">
                <i class="el-icon-monitor"></i>
              </div>
              <div class="stat-content">
                <div class="stat-label">检测主机数</div>
                <div class="stat-value">{{ stats.hostCount }}</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon">
                <i class="el-icon-document-checked"></i>
              </div>
              <div class="stat-content">
                <div class="stat-label">检测基线数</div>
                <div class="stat-value">{{ stats.baselineCount }}</div>
              </div>
            </div>
            <div class="stat-item">
              <div class="stat-icon">
                <i class="el-icon-setting"></i>
              </div>
              <div class="stat-content">
                <div class="stat-label">主机配置检查项</div>
                <div class="stat-value">{{ stats.configCount }}</div>
              </div>
            </div>
          </div>
          <div class="check-time">
            <i class="el-icon-time"></i>
            <span>最近检查时间：{{ lastCheckTime }}</span>
          </div>
          <div class="action-group">
            <el-button type="primary" icon="el-icon-refresh" @click="handleManualCheck">手动检测</el-button>
            <el-button icon="el-icon-setting" @click="handleStrategyManagement">策略管理</el-button>
          </div>
        </div>
        <div class="header-right">
          <div class="baseline-selector">
            <span class="selector-label">基线检查策略</span>
            <el-select v-model="baselineType" placeholder="基线检查策略" size="medium">
              <el-option label="全部策略" value="all"></el-option>
              <el-option label="云安全基线" value="cloud"></el-option>
              <el-option label="等保合规" value="compliance"></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 图表面板区域 -->
    <div class="charts-container">
      <el-row :gutter="20">
        <!-- 基线通过率仪表盘 -->
        <el-col :xs="24" :sm="12" :md="6" :lg="6">
          <el-card class="chart-card" shadow="hover">
            <div class="chart-header">
              <div class="chart-title">
                <i class="el-icon-data-analysis"></i>
                <span>主机配置基线通过率</span>
              </div>
            </div>
            <div class="gauge-chart-container">
              <div class="gauge-chart" ref="gaugeChart"></div>
              <div class="gauge-center-text">
                <div class="gauge-value"></div>
                <div class="gauge-label">通过率</div>
              </div>
            </div>
            <div class="risk-stats">
              <div class="risk-item high">
                <span class="risk-dot"></span>
                <span class="risk-label">高危</span>
                <el-tag type="danger" size="small" class="risk-tag">{{ riskStats.high }}</el-tag>
              </div>
              <div class="risk-item medium">
                <span class="risk-dot"></span>
                <span class="risk-label">中危</span>
                <el-tag type="warning" size="small" class="risk-tag">{{ riskStats.medium }}</el-tag>
              </div>
              <div class="risk-item low">
                <span class="risk-dot"></span>
                <span class="risk-label">低危</span>
                <el-tag type="info" size="small" class="risk-tag">{{ riskStats.low }}</el-tag>
              </div>
            </div>
            <div class="risk-summary">
              <span>未通过检查项数: {{ riskStats.total }}</span>
            </div>
          </el-card>
        </el-col>

        <!-- 配置风险TOP5 -->
        <el-col :xs="24" :sm="12" :md="6" :lg="6">
          <el-card class="chart-card" shadow="hover">
            <div class="chart-header">
              <div class="chart-title">
                <i class="el-icon-warning"></i>
                <span>主机配置风险TOP5</span>
              </div>
            </div>
            <div class="risk-legend">
              <div class="legend-item">
                <span class="legend-dot high"></span>
                <span>高危</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot medium"></span>
                <span>中危</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot low"></span>
                <span>低危</span>
              </div>
            </div>
            <div class="risk-chart" ref="riskChart"></div>
          </el-card>
        </el-col>

        <!-- 端口统计 -->
        <el-col :xs="24" :sm="12" :md="6" :lg="6">
          <el-card class="chart-card" shadow="hover">
            <div class="chart-header">
              <div class="chart-title">
                <i class="el-icon-connection"></i>
                <span>主机端口安全统计</span>
              </div>
            </div>
            <div class="port-chart-container">
              <div class="port-chart" ref="portChart"></div>
              <div class="port-center-text">
                <div class="port-value">{{ portStats.total }}</div>
                <div class="port-label">总数 (台)</div>
              </div>
            </div>
            <div class="port-legend">
              <div class="legend-item">
                <span class="legend-dot port-exposed"></span>
                <span>有暴露端口</span>
                <span class="legend-count">{{ portStats.exposed }}</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot port-undetected"></span>
                <span>未开启检测</span>
                <span class="legend-count">{{ portStats.undetected }}</span>
              </div>
              <div class="legend-item">
                <span class="legend-dot port-safe"></span>
                <span>无端口暴露</span>
                <span class="legend-count">{{ portStats.safe }}</span>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 端口风险TOP5 -->
        <el-col :xs="24" :sm="12" :md="6" :lg="6">
          <el-card class="chart-card" shadow="hover">
            <div class="chart-header">
              <div class="chart-title">
                <i class="el-icon-warning-outline"></i>
                <span>主机端口风险TOP5</span>
              </div>
            </div>
            <div class="port-risk-empty" v-if="!hasPortRiskData">
              <i class="el-icon-box"></i>
              <p>暂无数据</p>
            </div>
            <div class="port-risk-chart" ref="portRiskChart" v-else></div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 基线检查列表 -->
    <el-card class="table-card" shadow="hover">
      <!-- 标签页 -->
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane name="config">
          <span slot="label">
            <i class="el-icon-cpu"></i> 配置检查 ({{ total }})
          </span>
          <div class="empty-content" v-if="baselineList.length===0">
            <i class="el-icon-folder"></i>
            <p>暂无配置检查数据</p>
          </div>
          <div  v-if="baselineList.length!=0" class="table-toolbar">
            <div class="left-section">
              <el-input
                v-model="searchQuery"
                placeholder="搜索基线名称、检查项"
                prefix-icon="el-icon-search"
                clearable
                size="medium"
                style="width: 300px"
                @clear="handleSearch"
                @keyup.enter.native="handleSearch"
              ></el-input>
            </div>
            <div class="right-section">
              <el-button type="primary" icon="el-icon-download" size="medium" @click="handleExport">导出</el-button>
              <el-button icon="el-icon-refresh" size="medium" @click="handleRefresh">刷新</el-button>
            </div>
          </div>

          <el-table
            v-if="baselineList.length!=0"
            :data="baselineList"
            style="width: 100%"
            :header-cell-style="tableHeaderStyle"
            border
            stripe
            highlight-current-row
          >
            <el-table-column label="风险等级" width="100" align="center">
              <template slot-scope="{ row }">
                <div class="risk-level">
                  <el-tag
                    :type="getRiskLevelType(row.severity)"
                    effect="dark"
                    size="small"
                  >
                    <i :class="getRiskLevelIcon(row.severity)"></i>
                    {{ getRiskLevelName(row.severity) }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="基线名称" min-width="180">
              <template slot-scope="{ row }">
                <div class="baseline-name">
                  <span class="name-text">{{ row.check_name }}</span>
                  <el-tag size="mini" effect="plain" type="info">{{ row.check_type }}</el-tag>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="标准类型" width="150" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.standard }}</span>
              </template>
            </el-table-column>

            <el-table-column label="检查项" width="80" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.failed_rule_num }}</span>
              </template>
            </el-table-column>

            <el-table-column label="风险项" width="80" align="center">
              <template slot-scope="{ row }">
                <span class="risk-count">{{ row.riskCount }}</span>
              </template>
            </el-table-column>

            <el-table-column label="扫描主机数" width="100" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.host_num }}</span>
              </template>
            </el-table-column>

            <el-table-column label="最新检测时间" width="180">
              <template slot-scope="{ row }">
                <span>{{ formatTime(row.scan_time) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="描述" min-width="300">
              <template slot-scope="{ row }">
                <el-tooltip
                  :content="row.check_type_desc"
                  placement="top"
                  :disabled="!row.check_type_desc || row.check_type_desc.length <= 50"
                >
                  <span class="description-text">{{ row.check_type_desc || '-' }}</span>
                </el-tooltip>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="150" fixed="right">
              <template slot-scope="{ row }">
                <el-button
                  type="text"
                  size="small"
                  @click="handleViewDetails(row)"
                >查看详情</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="handleScanNow(row)"
                >立即检测</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getBaselineList"
            />
        </el-tab-pane>

        <el-tab-pane name="idle">
          <span slot="label">
            <i class="el-icon-timer"></i> 今日空闲策略检测 ({{ idlePolicyCount }})
          </span>
          <div class="empty-content">
            <i class="el-icon-folder"></i>
            <p>暂无空闲策略检测数据</p>
          </div>
        </el-tab-pane>

        <el-tab-pane name="port">
          <span slot="label">
            <i class="el-icon-connection"></i> 经典端口检测 ({{ classicPortCount }})
          </span>
          <div class="empty-content">
            <i class="el-icon-folder"></i>
            <p>暂无端口检测数据</p>
          </div>
        </el-tab-pane>

        <el-tab-pane name="pswline">
          <span slot="label">
            <i class="el-icon-connection"></i> 弱口令检测 ({{ classicPortCount }})
          </span>
          <div class="empty-content" v-if="pwdlineList.length===0">
            <i class="el-icon-folder"></i>
            <p>暂无弱口令数据</p>
          </div>
          <el-table
            v-if="pwdlineList.length!=0"
            :data="pwdlineList"
            style="width: 100%"
            :header-cell-style="tableHeaderStyle"
            border
            stripe
            highlight-current-row
          >
            <el-table-column label="风险等级" width="100" align="center">
              <template slot-scope="{ row }">
                <div class="risk-level">
                  <el-tag
                    :type="getRiskLevelType(row.severity)"
                    effect="dark"
                    size="small"
                  >
                    <i :class="getRiskLevelIcon(row.severity)"></i>
                    {{ getRiskLevelName(row.severity) }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="基线名称" min-width="180">
              <template slot-scope="{ row }">
                <div class="baseline-name">
                  <span class="name-text">{{ row.check_name }}</span>
                  <el-tag size="mini" effect="plain" type="info">{{ row.check_type }}</el-tag>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="标准类型" width="150" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.standard }}</span>
              </template>
            </el-table-column>

            <el-table-column label="检查项" width="80" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.failed_rule_num }}</span>
              </template>
            </el-table-column>

            <el-table-column label="风险项" width="80" align="center">
              <template slot-scope="{ row }">
                <span class="risk-count">{{ row.riskCount }}</span>
              </template>
            </el-table-column>

            <el-table-column label="扫描主机数" width="100" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.host_num }}</span>
              </template>
            </el-table-column>

            <el-table-column label="最新检测时间" width="180">
              <template slot-scope="{ row }">
                <span>{{ formatTime(row.scan_time) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="描述" min-width="300">
              <template slot-scope="{ row }">
                <el-tooltip
                  :content="row.check_type_desc"
                  placement="top"
                  :disabled="!row.check_type_desc || row.check_type_desc.length <= 50"
                >
                  <span class="description-text">{{ row.check_type_desc || '-' }}</span>
                </el-tooltip>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="150" fixed="right">
              <template slot-scope="{ row }">
                <el-button
                  type="text"
                  size="small"
                  @click="handleViewDetails(row)"
                >查看详情</el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="handleScanNow(row)"
                >立即检测</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      title="基线详情"
      :visible.sync="detailsDialogVisible"
      width="800px"
      custom-class="details-dialog"
      :modal="false"
    >
      <div class="baseline-details" v-if="selectedBaseline">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="基线名称">{{ selectedBaseline.check_name }}</el-descriptions-item>
          <el-descriptions-item label="基线类型">{{ selectedBaseline.check_type }}</el-descriptions-item>
          <el-descriptions-item label="标准类型">{{ selectedBaseline.standard }}</el-descriptions-item>
          <el-descriptions-item label="风险等级">
            <el-tag :type="getRiskLevelType(selectedBaseline.severity)" size="small">
              {{ getRiskLevelName(selectedBaseline.severity) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="检查项">{{ selectedBaseline.check_rule_num }}</el-descriptions-item>
          <el-descriptions-item label="风险项">{{ selectedBaseline.failed_rule_num }}</el-descriptions-item>
          <el-descriptions-item label="最新检测时间">{{ selectedBaseline.scan_time }}</el-descriptions-item>
          <el-descriptions-item label="扫描主机数">{{formatTime( selectedBaseline.host_num) }}</el-descriptions-item>
          <el-descriptions-item label="描述" :span="2">{{ selectedBaseline.check_type_desc }}</el-descriptions-item>
        </el-descriptions>

        <div class="details-section">
          <div class="section-title">风险项列表</div>
          <el-table :data="riskItems" style="width: 100%" border>
            <el-table-column label="风险项" prop="name"></el-table-column>
            <el-table-column label="风险等级" width="100">
              <template slot-scope="{ row }">
                <el-tag :type="getRiskLevelType(row.level)" size="small">
                  {{ getRiskLevelName(row.level) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="100">
              <template slot-scope="{ row }">
                <el-tag type="danger" v-if="row.status === 'failed'">未通过</el-tag>
                <el-tag type="success" v-else>已通过</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="建议" min-width="200">
              <template slot-scope="{ row }">
                <span>{{ row.suggestion }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailsDialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="handleScanNow(selectedBaseline)">立即检测</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {baseline, pswline} from "@/api/resell/orderinstance";

export default {
  name: 'SecurityBaseline',
  props: {
    currentResource: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 统计数据
      stats: {
        hostCount: 1,
        baselineCount: 2,
        configCount: 55
      },

      // 风险统计
      riskStats: {
        high: 8,
        medium: 9,
        low: 3,
        total: 20
      },

      // 端口统计
      portStats: {
        total: 1,
        exposed: 0,
        undetected: 0,
        safe: 1
      },

      // 查询条件
      baselineType: 'all',
      searchQuery: '',
      activeTab: 'config',
      lastCheckTime: '2025/03/13 02:30:00 GMT+08:00',

      // 分页
      total: 0,

      // 图表实例
      gaugeChart: null,
      riskChart: null,
      portChart: null,
      portRiskChart: null,

      // 基线列表数据
      baselineList: [],
      // 弱口令查询
      pwdlineList: [],
      // 其他计数
      idlePolicyCount: 0,
      classicPortCount: 0,

      // 详情对话框
      detailsDialogVisible: false,
      selectedBaseline: null,

      // 风险项列表
      riskItems: [
        {
          name: 'Nginx配置文件权限过大',
          level: 'high',
          status: 'failed',
          suggestion: '建议将Nginx配置文件权限设置为644，所有者为root:root'
        },
        {
          name: 'Nginx默认页面未删除',
          level: 'medium',
          status: 'failed',
          suggestion: '建议删除Nginx默认页面，防止信息泄露'
        },
        {
          name: 'Nginx版本信息暴露',
          level: 'medium',
          status: 'failed',
          suggestion: '建议在配置中隐藏Nginx版本信息'
        }
      ],
      localCurrentResource: {},
      // 端口风险数据标志
      hasPortRiskData: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
    }
  },
  computed: {
    // 表格样式
    tableHeaderStyle() {
      return {
        background: '#f5f7fa',
        color: '#606266',
        fontWeight: 500,
        height: '50px'
      }
    },
  },
  created() {
    this.localCurrentResource = this.currentResource;  // 初始化本地数据属性
    this.getBaselineList();
    this.getPswlineList();
  },
  methods: {
    formatTime(timestamp) {
      if (!timestamp) return '';
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 初始化图表
    initCharts() {
      // 初始化仪表盘
      this.gaugeChart = echarts.init(this.$refs.gaugeChart)
      const gaugeOption = {
        series: [{
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          radius: '100%',
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 16,
              color: [
                // 确保这些数值都是 0-1 之间的有效小数
                [0.333, '#F56C6C'],  // 红色区域
                [0.666, '#E6A23C'],  // 黄色区域
                [1.0, '#67C23A']     // 绿色区域
              ]
            }
          },
          pointer: {
            show: true,
            width: 4,
            length: '70%',
            itemStyle: {
              color: '#409EFF'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            length: 8,
            distance: -16,
            lineStyle: {
              color: '#E4E7ED',
              width: 1
            }
          },
          axisLabel: {
            show: true,
            distance: -25,
            fontSize: 12,
            color: '#909399',
            formatter: function(value) {
              return value + '%'
            }
          },
          detail: {
            valueAnimation: true,
            formatter: '{value}%',
            color: '#303133',
            fontSize: 24,
            offsetCenter: [0, '20%']
          },
          data: [{
            value: 63,
            name: ''
          }]
        }]
      }

      try {
        this.gaugeChart.setOption(gaugeOption)
      } catch (error) {
        console.error('仪表盘初始化失败:', error)
      }

      // 初始化风险TOP5图表
      this.riskChart = echarts.init(this.$refs.riskChart)
      this.riskChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}: {c}'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            show: true,
            fontSize: 10
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#EBEEF5'
            }
          }
        },
        yAxis: {
          type: 'category',
          data: [this.localCurrentResource.resourceName],
          axisLabel: {
            fontSize: 12
          }
        },
        series: [
          {
            name: '风险项',
            type: 'bar',
            data: [20],
            itemStyle: {
              color: function(params) {
                // 根据数值设置不同颜色
                const colorStops = [
                  [0.3, '#ff4d4f'],  // 高危部分 - 红色
                  [0.7, '#faad14'],  // 中危部分 - 黄色
                  [1, '#91cc75']     // 低危部分 - 绿色
                ];

                return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorStops);
              }
            },
            barWidth: '60%',
            label: {
              show: true,
              position: 'right',
              fontSize: 12
            }
          }
        ]
      })

      // 初始化端口统计图表
      this.portChart = echarts.init(this.$refs.portChart)
      this.portChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        color: ['#ff4d4f', '#faad14', '#52c41a'],
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 0, name: '有暴露端口' },
              { value: 0, name: '未开启检测' },
              { value: 1, name: '无端口暴露' }
            ],
            animationDuration: 1500
          }
        ]
      })

      // 初始化端口风险TOP5图表
      if (this.hasPortRiskData) {
        this.portRiskChart = echarts.init(this.$refs.portRiskChart)
        this.portRiskChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: []
          },
          series: [
            {
              name: '风险端口',
              type: 'bar',
              data: []
            }
          ]
        })
      }
    },

    // 获取风险等级类型
    getRiskLevelType(level) {
      const types = {
        High: 'danger',
        medium: 'warning',
        low: 'info'
      }
      return types[level] || 'info'
    },

    // 获取风险等级图标
    getRiskLevelIcon(level) {
      const icons = {
        High: 'el-icon-error',
        medium: 'el-icon-warning',
        low: 'el-icon-info'
      }
      return icons[level] || 'el-icon-info'
    },

    // 获取风险等级名称
    getRiskLevelName(level) {
      const names = {
        High: '高危',
        medium: '中危',
        low: '低危'
      }
      return names[level] || '未知'
    },

    // 手动检测
    handleManualCheck() {
      this.$message({
        message: '开始执行手动检测...',
        type: 'info'
      })
    },

    // 策略管理
    handleStrategyManagement() {
      this.$message({
        message: '正在跳转到策略管理页面...',
        type: 'info'
      })
    },

    // 查看详情
    handleViewDetails(row) {
      this.selectedBaseline = row
      this.detailsDialogVisible = true
    },

    // 立即检测
    handleScanNow(row) {
      this.$message({
        message: `开始检测 ${row.name}...`,
        type: 'info'
      })

      // 模拟检测过程
      const loading = this.$loading({
        lock: true,
        text: '检测中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })


      setTimeout(() => {
        loading.close()
        this.$message({
          message: `${row.name} 检测完成`,
          type: 'success'
        })
      }, 2000)
    },

    // 导出数据
    handleExport() {
      this.$message({
        message: '正在导出数据...',
        type: 'info'
      })

      setTimeout(() => {
        this.$message({
          message: '数据导出成功',
          type: 'success'
        })
      }, 1000)
    },

    // 刷新数据
    handleRefresh() {
      this.getBaselineList()
      this.$message({
        message: '数据已刷新',
        type: 'success'
      })
    },

    // 搜索处理
    handleSearch() {
      this.getBaselineList()
    },

    // 标签页切换
    handleTabClick(tab) {
      console.log(tab.name)
    },

    // 获取基线列表
    getBaselineList() {
      try {
        this.localCurrentResource.pagesize = this.queryParams.pageSize;
        this.localCurrentResource.pagenum =this.queryParams.pageNum;
        baseline(this.localCurrentResource).then(response => {
          console.log(response);
          if(response.code===200) {
            this.total = response.total1
            console.log(this.total);
            this.baselineList = response.rows.map(item => ({
              ...item,
              check_type_desc: item.check_type_desc || '-'
            }));
          }
          if(response.code===500) {
            this.$message({
              message: response.msg,
              type: 'error'
            })
          }
        })

      } catch (error) {
        console.error('获取基线列表失败:', error)
        this.baselineList = []
      }
    },

    getPswlineList()
    {
      try {
        this.localCurrentResource.pagesize = this.queryParams.pageSize;
        this.localCurrentResource.pagenum =this.queryParams.pageNum;
        pswline(this.localCurrentResource).then(response => {
          console.log("获取弱口令查询");
          console.log(response);
          if(response.code===200) {
            this.pwdlineList = response.rows;
          }
        })

      } catch (error) {
        console.error('获取弱口令查询失败:', error)
        this.pwdlineList = []
      }
    },
    // 窗口大小变化时重绘图表
    resizeCharts() {
      this.gaugeChart?.resize()
      this.riskChart?.resize()
      this.portChart?.resize()
      this.portRiskChart?.resize()
    }
  },
  mounted() {
    this.$nextTick(() => {
      try {
        this.initCharts()
        this.getBaselineList()
      } catch (error) {
        console.error('图表初始化失败:', error)
      }
    })

    // 监听窗口大小变化，重绘图表
    window.addEventListener('resize', this.resizeCharts)
  },
  beforeDestroy() {
    // 销毁图表，避免内存泄漏
    if (this.gaugeChart) {
      this.gaugeChart.dispose()
    }
    if (this.riskChart) {
      this.riskChart.dispose()
    }

    // 移除事件监听
    window.removeEventListener('resize', this.resizeCharts)
  }
}
</script>

<style scoped>
.security-baseline-container {
  padding: 0px;
}

/* 头部卡片样式 */
.header-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.header-left {
  flex: 1;
}

.title-section {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.main-title {
  font-size: 22px;
  color: #303133;
  margin: 0;
  margin-right: 12px;
}

.service-tag {
  font-size: 12px;
  height: 22px;
  line-height: 20px;
  padding: 0 8px;
}

.description {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 0;
  max-width: 800px;
}

.header-right {
  display: flex;
  align-items: center;
}

.baseline-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.selector-label {
  font-size: 14px;
  color: #606266;
}

.header-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.stat-group {
  display: flex;
  gap: 40px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-color: #ecf5ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon i {
  font-size: 24px;
  color: #409eff;
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 500;
  color: #303133;
}

.check-time {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #606266;
  padding-left: 100px;
  padding-right: 100px;
}

.check-time i {
  color: #909399;
}

.action-group {
  display: flex;
  gap: 12px;
}

/* 图表区域样式 */
.charts-container {
  margin-bottom: 20px;
}

.chart-card {
  height: 380px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-title i {
  font-size: 18px;
  color: #409eff;
}

/* 仪表盘样式 */
.gauge-chart-container {
  height: 220px;
  position: relative;
}

.gauge-chart {
  height: 100%;
  width: 100%;
}

.gauge-center-text {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.gauge-value {
  font-size: 36px;
  font-weight: 500;
  color: #303133;
}

.gauge-label {
  margin-top: 50px;
  font-size: 14px;
  color: #606266;
}

.risk-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

.risk-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.risk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.risk-item.high .risk-dot {
  background-color: #f56c6c;
}

.risk-item.medium .risk-dot {
  background-color: #e6a23c;
}

.risk-item.low .risk-dot {
  background-color: #909399;
}

.risk-label {
  font-size: 14px;
  color: #606266;
}

.risk-tag {
  min-width: 28px;
  text-align: center;
}

.risk-summary {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}

/* 风险图表样式 */
.risk-legend {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #606266;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-dot.high {
  background-color: #f56c6c;
}

.legend-dot.medium {
  background-color: #e6a23c;
}

.legend-dot.low {
  background-color: #52c41a;
}

.risk-chart {
  height: 260px;
}

/* 端口图表样式 */
.port-chart-container {
  height: 220px;
  position: relative;
}

.port-chart {
  height: 100%;
  width: 100%;
}

.port-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.port-value {
  font-size: 36px;
  font-weight: 500;
  color: #303133;
}

.port-label {
  font-size: 14px;
  color: #606266;
}

.port-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.legend-dot.port-exposed {
  background-color: #f56c6c;
}

.legend-dot.port-undetected {
  background-color: #e6a23c;
}

.legend-dot.port-safe {
  background-color: #52c41a;
}

.legend-count {
  margin-left: auto;
  font-weight: 500;
}

/* 端口风险图表样式 */
.port-risk-chart {
  height: 300px;
}

.port-risk-empty {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
}

.port-risk-empty i {
  font-size: 48px;
  margin-bottom: 16px;
}

.port-risk-empty p {
  font-size: 16px;
}

/* 表格卡片样式 */
.table-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.baseline-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.name-text {
  font-weight: 500;
}

.risk-level {
  display: flex;
  align-items: center;
  justify-content: center;
}

.risk-count {
  color: #f56c6c;
  font-weight: 500;
}

.description-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding: 10px 0;
}

/* 空内容样式 */
.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #909399;
}

.empty-content i {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-content p {
  font-size: 16px;
}

/* 详情对话框样式 */
.details-dialog >>> .el-dialog__body {
  padding: 20px 30px;
}

.baseline-details {
  max-height: 600px;
  overflow-y: auto;
}

.details-section {
  margin-top: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
}

/* 响应式样式 */
@media screen and (max-width: 1400px) {
  .stat-group {
    gap: 20px;
  }

  .chart-card {
    height: 320px;
  }

  .gauge-chart-container,
  .port-chart-container {
    height: 180px;
  }

  .risk-chart,
  .port-risk-chart {
    height: 240px;
  }
}

@media screen and (max-width: 1200px) {
  .header-content {
    flex-direction: column;
  }

  .header-right {
    margin-top: 16px;
  }

  .header-stats {
    flex-direction: column;
    gap: 20px;
  }

  .stat-group {
    width: 100%;
    justify-content: space-around;
  }

  .action-group {
    width: 100%;
    justify-content: flex-end;
    margin-top: 16px;
  }
}

@media screen and (max-width: 768px) {
  .security-baseline-container {
    padding: 10px;
  }

  .stat-group {
    flex-direction: column;
    gap: 16px;
  }

  .action-group {
    flex-direction: column;
    width: 100%;
  }

  .action-group .el-button {
    width: 100%;
  }

  .table-toolbar {
    flex-direction: column;
    gap: 16px;
  }

  .left-section,
  .right-section {
    width: 100%;
  }

  .right-section {
    display: flex;
    gap: 10px;
  }

  .right-section .el-button {
    flex: 1;
  }
}
</style>
